<template>
  <div class="flex justify-between" style="width: 100%">
    <h1 style="font-size: 1.25rem; margin-bottom: 1.25rem">
      {{ $t("币币兑换") }}/{{ $t("挂单") }}
    </h1>
    <el-button size="large" type="primary" @click="createPendingOrder">
      {{ $t("创建挂单") }}
    </el-button>
  </div>

  <el-card>
    <div class="flex">
      <el-input
        v-model="filterForm.record_id"
        style="max-width: 30%; padding: 0.5rem"
        :placeholder="$t('挂单号搜索')"
        @change="filterList()"
      ></el-input>
      <el-select
        v-model="filterForm.coin_name"
        style="max-width: 20%; padding: 0.5rem"
        :placeholder="$t('币种')"
        @change="filterList()"
      >
        <el-option
          v-for="item in coins"
          :key="item.coin_name"
          :label="item.coin_name"
          :value="item.coin_name"
        ></el-option>
      </el-select>
      <el-select
        v-model="filterForm.status"
        style="max-width: 20%; padding: 0.5rem"
        :placeholder="$t('挂单状态')"
        @change="filterList()"
      >
        <el-option
          v-for="item in statusStore.pendingOrderStatus"
          :key="item.key"
          :label="item.name"
          :value="item.key"
        ></el-option>
      </el-select>
    </div>

    <el-table :data="orderList" v-loading="loading" style="margin-top: 1.25rem">
      <el-table-column prop="record_id" :label="$t('挂单号')" />
      <el-table-column
        align="center"
        prop="coin_name"
        :label="$t('币种')"
        width="80"
      >
      </el-table-column>
      <el-table-column
        align="right"
        prop="quantity"
        :label="$t('可卖出金额')"
        width="180"
      >
        <!-- <template #default="scope">
          {{ scope.row.from_quantity }} {{ scope.row.from_coin_name }}
        </template> -->
      </el-table-column>
      <el-table-column
        align="right"
        prop="min_quantity"
        :label="$t('单笔最小金额')"
        width="150"
      >
        <!-- <template #default="scope">
          {{ scope.row.to_quantity }} {{ scope.row.to_coin_name }}
        </template> -->
      </el-table-column>
      <el-table-column align="center" :label="$t('挂单状态')">
        <template #default="scope">
          <el-tag :type="getCurrentPendingOrderStatus(scope.row.status).type">{{
            getCurrentPendingOrderStatus(scope.row.status).name
          }}</el-tag>
        </template>
      </el-table-column>

      <el-table-column
        fixed="right"
        align="center"
        :label="$t('操作')"
        width="240"
      >
        <template #default="scope">
          <div class="flex">
            <el-button
              round
              icon="MoreFilled"
              class="cursor-pointer"
              @click="showCurrentDetail(scope)"
              >{{ $t("查看") }}
            </el-button>
            <!-- //已取消的订单不显示开始暂停按钮 -->
            <el-button
              v-show="scope.row.status !== 2"
              round
              icon="MoreFilled"
              class="cursor-pointer"
              @click="setPendingOrder(scope)"
              >{{ $t("开始/暂停") }}
            </el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>

    <div class="flex justify-center mt-5">
      <el-pagination background
        layout="total, sizes, prev, pager, next, jumper"
        :total="pageable.total"
        :default-page-size="pageable.pageSize"
        :default-current-page="pageable.pageNum"
        :page-sizes="[10, 25, 50, 100]"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange" />
    </div>
  </el-card>

  <createPendingOrderDrawer
    :show="isShowPendingOrderDrawer"
    :coinList="coins"
    :recordId="currentRecordId"
    @close="
      (id) => {
        currentRecordId = id;
        isShowPendingOrderDrawer = false;
      }
    "
  />
  <pendingOrderDetailDrawer
    :show="isShowPendingOrderDetailDrawer"
    :recordId="currentRecordId"
    @close="
      (id) => {
        currentRecordId = '';
        if (id) {
          isShowPendingOrderDetailDrawer = false;
          createPendingOrder();
        }
      }
    "
  ></pendingOrderDetailDrawer>
</template>
<script setup>
import createPendingOrderDrawer from "./components/createPendingOrderDrawer.vue";
import pendingOrderDetailDrawer from "./components/pendingOrderDetailDrawer.vue";
import { ref, reactive, computed, watch } from "vue";
import {
  getSwapMarketPagesApi,
  getSwapCoinsApi,
  postSwapMarketSetApi,
} from "@/api/swap/index";
import { useStatusStore } from "@/store/modules/status";
import { ElMessage } from "element-plus";
import { useI18n } from "vue-i18n";
const { t } = useI18n();
const statusStore = useStatusStore();
const loading = ref(false);
const coins = ref([]);
const orderList = ref([]);
const totalCount = ref(0);

let pageable = reactive({
  page: 1,
  pagesize: 10,
});
const getSwapCoins = async () => {
  try {
    //获取币种
    const coinsRes = await getSwapCoinsApi();
    coins.value = coinsRes;
  } catch (e) {
    return false;
  }

  getSwapMarketList();
};
const getSwapMarketList = async (addQuery) => {
  try {
    loading.value = true;
    const { page, list } = await getSwapMarketPagesApi({
      ...pageable,
      ...addQuery,
    });
    if (list?.length) {
      orderList.value = list;
      totalCount.value = page.total_count;
    }
    loading.value = false;
  } catch (e) {
    loading.value = false;
    return false;
  }
};
getSwapCoins();

const getCurrentPendingOrderStatus = (status) => {
  return statusStore.pendingOrderStatus.find((i) => i.key === status);
};
// 点击分页
const handleCurrentChange = async (number) => {
  query.page = number;
  await getSwapMarketList();
};
// 条数
const handleSizeChange = number => {
  pageable.pageSize = number;
  getTbaleData();
};
//点击创建挂单
const isShowPendingOrderDrawer = ref(false);
const createPendingOrder = () => {
  isShowPendingOrderDrawer.value = !isShowPendingOrderDrawer.value;
};

//筛选组件
const filterForm = reactive({
  coin_name: "",
  record_id: "",
  status: "",
});
const filterList = async (e) => {
  const newQuery = Object.entries(filterForm).reduce((acc, [key, value]) => {
    if (value) {
      acc[key] = value;
    }
    return acc;
  }, {});
  query.page = 1;
  await getSwapMarketList(newQuery);
};

const setPendingOrder = async (scope) => {
  try {
    const data = {
      record_id: scope.row.record_id,
      status: scope.row.status === 0 ? 1 : 0,
    };
    const setRes = await postSwapMarketSetApi(data);
    ElMessage({
      showClose: false,
      message: t("设置成功！"),
      type: "success",
      grouping: true,
    });

    filterList();
  } catch (e) {
    return false;
  }
};

const isShowPendingOrderDetailDrawer = ref(false);
const currentRecordId = ref("");
const showCurrentDetail = (scope) => {
  currentRecordId.value = scope.row.record_id.toString();
};
watch(currentRecordId, (newVal) => {
  isShowPendingOrderDetailDrawer.value = newVal ? true : false;
});
</script>
<style lang="scss"></style>
